<template>
  <el-dialog
    v-dialogDrag
    append-to-body
    class="dialogStyleMiddle"
    :title="dataScopeDetTitle"
    :visible.sync="dataScopeDet"
    :before-close="cancel"
  >
    <!-- 岗位 -->
    <div
      v-if="dataObjectTypeDet.dataObjType === 'SysPost' "
      style="text-align:left"
    >
      <post-mana
        ref="SysPost"
        :data-scop-list-del-list="dataScopListDelList"
        @multipleSelection="getMultipleSelection"
      />
    </div>
    <!-- 用户 -->
    <div
      v-else-if="dataObjectTypeDet.dataObjType === 'SysUser'"
      style="text-align:left"
    >
      <user-mana
        ref="SysUser"
        :data-scop-list-del-list="dataScopListDelList"
        @multipleSelection="getMultipleSelection"
      />
    </div>
    <!-- 部门 -->
    <div
      v-else-if="dataObjectTypeDet.dataObjType === 'SysDept'"
      style="text-align:left"
    >
      <dept-mana
        ref="SysDept"
        :data-scop-list-del-list="dataScopListDelList"
        @multipleSelection="getMultipleSelection"
      />
    </div>
    <div slot="footer" class="dialog-footer">
      <DialogFooter />
    </div>
  </el-dialog>
</template>

<script>
import PostMana from '@/components/System/Post/PostLab.vue'
import UserMana from '@/components/System/User/UserLab.vue'
import DeptMana from '@/components/System/Dept/DeptLab.vue'
// dialog-footer
import DialogFooter from '@/components/Common/Btns/DialogFooter/index'
export default {
  components: {
    'user-mana': UserMana,
    'post-mana': PostMana,
    'dept-mana': DeptMana,
    DialogFooter
  },
  data() {
    return {
      // 弹框的标题
      dataScopeDetTitle: '',
      // 用于判断自定义列还是不自定义列
      dataObjTypeDataScope: '',
      // 是否弹框
      dataScopeDet: false,
      dataObjectTypeDet: {
        // 主键
        id: '',
        // 菜单id
        menuId: '',
        // 菜单栏主体（例如：用户菜单、角色菜单、部门菜单）
        dataObjType: '',
        // 存入的是row/column那种类型
        dataObjRecordType: '',
        // 选中了那些行id的集合
        dataObjRow: [],
        // 选中行对象的集合
        dataObjRowList: [],
        // 子定义列的数据
        dataObjColumn: []
      },
      // 菜单样式下拉菜单
      menuOptions: [],
      // 用于封装选中的行 行id 和列 列名的数组
      dataScopListDelList: []
    }
  },
  methods: {
    showObjectView(
      dataObjType,
      menuId,
      dataObjTypeDataScope,
      dataScopListDelList
    ) {
      this.dataScopeDetTitle = '数据权限'
      this.dataScopeDet = true
      this.dataObjectTypeDet.dataObjType = dataObjType
      this.dataObjectTypeDet.menuId = menuId
      // 判断是否自定义列
      this.dataObjTypeDataScope = dataObjTypeDataScope
      /**
       * 1、编辑时需要接受父类传过来的数据进行回显
       */
      this.dataScopListDelList = dataScopListDelList
    },
    // 接受子组件回传选择那些行的值
    getMultipleSelection(objectIds, objectRow) {
      // 选中行的id
      this.dataObjectTypeDet.dataObjRow = objectIds
      // 选中行对象的集合
      this.dataObjectTypeDet.dataObjRowList = objectRow
    },
    // 创建存储行和行id
    createDataScopListDel(dataObjRecordType, dataObjRow, dataObjRowList) {
      var DataScopListDel = {}
      DataScopListDel['dataObjRecordType'] = dataObjRecordType
      DataScopListDel['dataObjRow'] = dataObjRow
      DataScopListDel['dataObjRowList'] = dataObjRowList
      return DataScopListDel
    },
    // 把值返回到父类roleDataScope中
    submitForm() {
      this.dataScopListDelList = []
      // 有哪些行的值
      var dataObjRow = this.dataObjectTypeDet.dataObjRow
      // 选中的行对象
      var dataObjRowList = this.dataObjectTypeDet.dataObjRowList
      // 把行和行数封装对象
      var dataScopListDel2 = this.createDataScopListDel(
        'row',
        dataObjRow,
        dataObjRowList
      )
      // 把对象封装到数组中
      this.dataScopListDelList.push(dataScopListDel2)
      this.$emit('dataScopListDelList', this.dataScopListDelList)
      // 清空封装的数据组
      this.dataScopListDelList = []
      // 关闭弹框
      this.dataScopeDet = false
      // 清空勾选的行数
      // this.$refs.Object.emptmultipleSelection();
    },
    // 弹框取消按钮
    cancel() {
      this.dataScopeDet = false
      // 清空勾选的行数
      if (this.dataObjectTypeDet.dataObjType === 'SysPost') {
        this.$refs.SysPost.emptmultipleSelection()
      } else if (this.dataObjectTypeDet.dataObjType === 'SysUser') {
        this.$refs.SysUser.emptmultipleSelection()
      } else if (this.dataObjectTypeDet.dataObjType === 'SysDept') {
        this.$refs.SysDept.emptmultipleSelection()
      }
      this.dataScopListDelList = []
    }
  }
}
</script>
